<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>产品核价</title>
<script src="../public/libs/vue.js"></script>
<!--引入element组件库-->
<script src="../public/plugins/element-ui/lib/index.js"></script>
<script src="../public/libs/jquery.min.js"></script>
<script src="../public/plugins/axios/dist/axios.js"></script>
<script src="../public/libs/JsonExportExcel.min.js"></script>
<!-- 引入element样式 -->
<link rel="stylesheet" href="../public/plugins/element-ui/lib/theme-chalk/index.css">
</head>
<body style="overflow: scroll; overflow-x: hidden;">
	<div id="myVue" align="center">
		<div style="overflow: auto; width: 100%;">
			<el-row> 
				<el-col :span=3 align="right"> <span>报价单号：</span> </el-col> 
				<el-col :span=4>
					<el-input type="input" size="mini" v-model="quotationNo"></el-input> 
				</el-col>
				<el-col :span=3	align="right"> 	
					<span>客户名称：</span> </el-col> 
					<el-col :span=4> <el-input type="input"
				size="mini" v-model="cardName"></el-input> </el-col> 
				<el-col :span=10> 
					<el-button size="mini" type="primary" @click="queryList">查询报价单</el-button> 
					<el-button size="mini" type="primary" @click="jsonToExcel">导出 EXCEL</el-button>
				</el-col> 
			</el-row>
		</div>
		<p></p>
		<el-row> 
			<el-col :span=24> 
				<el-table 
				:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" @sort-change='sort_change'
				size="mini" border :show-header="true"
				:header-cell-style="{'text-align':'center','font-size':'14px',background:'#eef1f6',color:'#000000'}"
				ref="tableLine" style="background-color: bisque;width:100%;"> 
					<el-table-column label="ID" prop="id" width="70" sortable="custom">
					</el-table-column>
					<el-table-column v-for="(col,index) in titleData" :label="col.propName" 
					:prop="col.prop" sortable="custom" :width="115" :key="index" >
					</el-table-column> 				
					<el-table-column label="状态" width="80" sortable="custom">
						<template slot-scope="scope">
							<span v-if="scope.row.status == 0">尚未登记</span> 
							<span v-if="scope.row.status == 1">正常登记</span>
							<span v-if="scope.row.status == 2">技术核算</span> 
							<span v-if="scope.row.status == 3">财务核算</span>
							<span v-if="scope.row.status == 4">完成打单</span> 
							<span v-if="scope.row.status == 5">完成打印</span>
							<span v-if="scope.row.status == 6">作废</span>
						</template>
					</el-table-column>
					<el-table-column label="操作"	style="width:120 ;" align="center"> 
						<template slot-scope="rowData">
							<el-button	size="mini" type="primary" @click="checkPrice('technical',rowData.row)">产品核价</el-button> 

						</template> 
					</el-table-columm>
					
				</el-table> 
				<el-pagination
					@size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
					:page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"> 
				</el-pagination> 
			</el-col> 
		</el-row>
		<div
			style="width: 100%; height: 200px; background: url(../img/loading7.gif) no-repeat; 
				background-size: 150px 150px; position: relative; top: 50%; left: 45%;"
			v-show="dataLoading">
		</div>
		
		<!--新增产品报价对话框-->
		<el-dialog :title="核价" :visible.sync="techWin" width="1000px" ref="checkPrice" append-to-body> 
			<!--新增产品成本-->
			<el-form :inline="true"  name="prodCost" style="background-color:#87CEEB" :model="prodCostData" 
			ref="prodCost">
				<el-row>
					<el-col :span=3 align="center"> <el-form-item label="" prop="id"> 
						<span>{{prodCostData.id}}</span>
					</el-form-item> </el-col> 	
					<el-col :span=3 align="center"> <el-form-item label="" prop="quotationID"> 
						<span>{{prodCostData.quotationID}}</span>	
					</el-form-item> </el-col> 
					<el-col :span=4 align="center">
						<el-form-item label="" prop="confirmName"> 
							<el-select size="mini" v-model="prodCostData.confirmName" 
							placeholder="选择产品" @change="productChanged">
								<el-option
								v-for="item in productList"
								:key="item.id"
								:label="item.confirmName"
								:value="item.id+','+item.confirmName+','+item.quantity">
								</el-option>
							</el-select>
						</el-form-item>
				
					</el-col>
					
					<el-col :span=4 align="center"> 
						<el-form-item label="" prop="costItemName"> 
							<el-select size="mini" v-model="prodCostData.costItemName" 
							value-key="id" placeholder="选择单价项目">
								<el-option
								v-for="item in costItemList"
								:key="item.id"
								:label="item.costItemName"
								:value="item.id+','+item.costItemName">
								</el-option>
							</el-select>
						</el-form-item>
						
					</el-col>
					
					<el-col :span=4 align="center"> <el-form-item label="" prop="costPrice"> 
						<el-input v-model="prodCostData.costPrice" size="mini" placeholder="输入单价"></el-input>
					</el-form-item> </el-col>	
					<el-col :span=2 align="center"> <el-form-item label="" prop=""> 
						<span>{{Msg}}</span>
					</el-form-item> </el-col>					
					<el-col :span=4 align="center"><el-form-item label="" prop=""> 
						<el-button size="mini" type="primary" @click="saveProdCost">添加成本</el-button>
					</el-form-item></el-col>	
				</el-row>	
					
			</el-form>
			<el-table :data="prodCostLines"	size="mini"  :header-cell-style="{'text-align':'center',background:'#eef1f6',color:'#0000FF'}"
				ref="costLines"  border style="background-color: bisque;" :show-summary="true">                
				<el-table-column label="ID" prop="id" width=60>
				</el-table-column>
				<el-table-column prop="quotationID" label="报价ID" width=70>					
				</el-table-column>
				<el-table-column prop="confirmName" label="确定名称">
				</el-table-column>
				<el-table-column prop="costItemName" label="成本项目">
				</el-table-column>
				<el-table-column prop="costPrice" label="成本单价">
				</el-table-column>
				<el-table-column prop="quantity" label="数量">
				</el-table-column>
				<el-table-column prop="costAmount" label="金额小计">
				</el-table-column>
				<el-table-column prop="trueName" label="录入">
				</el-table-column>
				<el-table-column label="操作"	style="width:100 ;" align="center"> 
					<template slot-scope="rowData">
						<el-button	size="mini" type="primary" @click="delRow('prod',rowData.row)">删除</el-button> 
					</template> 
				</el-table-columm>
			</el-table> 
			<div slot="footer" class="dialog-footer">		
				<el-button @click="closeWin('confirmCost')" type="primary" size="mini">完成核价</el-button>
				<el-button @click="closeWin('prodCost')" type="primary" size="mini">取 消</el-button>
			</div>
		</el-dialog>
	</div>

	<script>

	var vm=new Vue({
	el: '#myVue',
	data: {			
			dataLoading:false,
	       	tableData: [],
			tableHead: {quotationNo:"",qtnTopic:"",cardCode:"",cardName:"",
				delivery:"",qtnType:"",tradeType:"",userName:"",trueName:"",
			   	department:"",createTime:"",timeRequire:"",
			   	inMemo:"",outMemo:"",total:0,contractNo:"",contractAmt:"",status:0,id:0,contractTime:""},
		 	titleData:[{"prop":"quotationNo","propName":"报价编号"},{"prop":"qtnTopic","propName":"主题"},
		 	{"prop":"qtnType","propName":"报价类型"},{"prop":"cardName","propName":"客户名称"},
			 {"prop":"trueName","propName":"报价人员"},{"prop":"createTime","propName":"报价时间"},
			 {"prop":"total","propName":"报价总额"}
			],		
			prodCostLines:[], 
			prodCostData:{id:0,quotationID:0,confirmName:"",quantity:0,costItemName:"",costPrice:0,costAmount:0,
				productId:0,costItemID:0,userName:"",trueName:"",costType:"",createTime:""},
			productList:[{id:0,confirmName:"测试产品",quantity:0}],
			costItemList:[{id:0,name:"金额"}],
		 	quotationNo:"",
		 	cardName:"",
            currentPage: 1,// 当前页            
            pageSize: 10,// 每页多少条
            proptype: "", //存放column.prop的字符串值
			techWin:false,
			Msg:''
			          },
	methods: {
		 // 每页多少条
        handleSizeChange:function(val) {
            this.pageSize = val;
        },
        // 当前页
        handleCurrentChange:function(val) {
            this.currentPage = val;
        },
		widthSet:function(prop){
			if(prop=="id") return 0; else return 110;
		},
		queryList:function(){
			var that=this;
			this.tableData=[]; 
			dataLoading=true;
			axios({
                method:'post',
                url:'../erp/quotation/list',
                data:{quotationNo:this.quotationNo,cardName:this.cardName},
                //headers:{"Content-Type":"multipart/form-data"}
            }).then(rsp=>{               
                var resp=rsp.data;                 
                that.tableData=resp.tableData; 
				that.dataLoading=false;		
                if(resp.code==200){ 
								
                }else{      }
            }).catch(error=> {
                       
                that.$message({
                    type:'error',
                    duration:60000,
                    message:'请求失败! error:'+error
                });
            })
			 
		},
		productChanged:function(value){
			var prodArr=(this.prodCostData.confirmName).split(",");
			var qty=prodArr[2];
			this.Msg="数量："+qty;

		},
		saveProdCost:function(){
				
			if(this.prodCostData.confirmName=="" ||this.prodCostData.costItemName==""){
				return;
			}
			var that=this;	
			//分解产品和成本字符串id、name
			var prodArr=(this.prodCostData.confirmName).split(",");
			this.prodCostData.confirmName=prodArr[1];
			this.prodCostData.productId=prodArr[0];
			this.prodCostData.quantity=prodArr[2];
			alert(this.prodCostData.quantity);
			var costArr=(this.prodCostData.costItemName).split(",");
			this.prodCostData.costItemID=costArr[0];
			this.prodCostData.costItemName=costArr[1];
			this.prodCostLines=[];
			axios({
                method:'post',
                url:'../erp/quotation/prodCost/save',
                data:this.prodCostData,
                //headers:{"Content-Type":"multipart/form-data"}
            }).then(rsp=>{               
                var resp=rsp.data;                 
				var total=resp.total;
				that.prodCostData.confirmName="";
				that.prodCostData.costItemName="";
				that.prodCostData.costPrice=0;
				that.Msg='';	
				/*		
				for(var item in that.tableData){
					alert(JSON.stringify(item));
					if(item.id==that.prodCostData.quotationID){
						item.total=total;
						alert(item);
					}
				}
				*/
				//获取产品成本项目列表
				axios({
					method:'post',
					url:'../erp/quotation/prodCost/list',
					data:{quotationID:that.prodCostData.quotationID},
					//headers:{"Content-Type":"multipart/form-data"}
				}).then(rsp=>{               
					var resp=rsp.data;                 
					that.prodCostLines=resp.prodCostLines;

					if(resp.code==200){ }else{      }
				}).catch(error=> {});
			
                if(resp.code==200){   
					
                }else{      }
            }).catch(error=> {
                       
                that.$message({
                    type:'error',
                    duration:60000,
                    message:'请求失败! error:'+error
                });
			});
			//alert(that.prodCostData.quotationID);
			
			 
		},
		
		checkPrice:function(which,row){
		//是否有权限或者单据状态是否容许此用户核价
			var department=localStorage.getItem("department");
			var power =localStorage.getItem("power");
			var status=row.status;
			this.Msg='';
			if(department.indexOf("技术")>-1 && status>1){
				alert("技术已经核算过了啊！");
				return;
			}
			else if(department.indexOf("财务")>-1 && status>2){
				alert("财务已经核算过了啊！");
				return;
			}
			var that=this;
			this.prodWinData=[];
			this.productList=[];
			this.prodCostData={};
			if(status==1)	this.$refs.checkPrice.title="技术核价"	;
			if(status==2)	this.$refs.checkPrice.title="财务核价"	;
			//获取产品列表
			axios({
				method:'post',
				url:'../erp/quotation/product/list',
				data:{quotationID:row.id,all:0},
			}).then(rsp=>{          
				var resp=rsp.data;                 
				that.productList=resp.productList; 
					
				if(resp.code==200){  }
				else{ }
			}).catch(error=> {
			});
			//获取成本项目列表
			axios({
				method:'post',
				url:'../erp/quotation/costItem/list',
				data:{quotationID:row.id},
			}).then(rsp=>{          
				var resp=rsp.data;                 
				that.costItemList=resp.costItemList; 
					
				if(resp.code==200){  }
				else{ }
			}).catch(error=> {
			});
			//获取已存在后台的
			this.techWin=true;
			this.prodCostData.quotationID=row.id;  
			axios({
				method:'post',
				url:'../erp/quotation/prodCost/list',
				data:{quotationID:row.id},
			}).then(rsp=>{          
				var resp=rsp.data;                 
				that.prodCostLines=resp.prodCostLines; 
					
				if(resp.code==200){  }
				else{ }
			}).catch(error=> {
			});
	
		},
		closeWin:function(which){
			switch(which){			 
			case "prodCost":this.techWin=false;break;
			case "confirmCost" :
				axios({
				method:'post',
				url:'../erp/quotation/status/updateDepartment',
				data:{quotationID:row.quotationID,department:localStorage.getItem("department")},
				}).then(rsp=>{          
					var resp=rsp.data;	
					if(resp.code==200){  that.techWin=false;}
					else{alert("有错误，报价单状态更新失败！"); }
				}).catch(error=> {
				});
				break;
			default:break;
			}
		},
		delRow:function(which,row){
			var userName=localStorage.getItem("userName");
			var trueName=localStorage.getItem("trueName");		
			if (trueName!=row.trueName) return false;
			if(confirm("确实要删除吗？"))	{
				var that=this;
				axios({
				method:'post',
				url:'../erp/quotation/prodCost/delete',
				data:{prodCostID:row.id},
				}).then(rsp=>{          
					var resp=rsp.data;	
					if(resp.code==200){  
						//获取产品成本列表
						axios({
						method:'post',
						url:'../erp/quotation/prodCost/list',
						data:{quotationID:row.quotationID},
						}).then(rsp=>{          
							var resp=rsp.data;   
							//setTimeout(function(){ that.prodCostLines=resp.prodCostLines;  }, 1000);　              
							that.prodCostLines=resp.prodCostLines;
							//alert(JSON.stringify(that.prodCostLines));
							if(resp.code==200){  }
							else{ }
						}).catch(error=> {
						});
					}
					else{alert("有错误，报价单状态更新失败！"); }
				}).catch(error=> {
				});

			}
			else{
				alert("canceled!");
			}

		},
		submitHead(){},submitProd(){},submitAttach(){},
		//若采用相同排序方法可简写：
	    sort_change:function(column) {
			this.currentPage = 1; // 排序后返回第一页
		    this.proptype = column.prop; // 将键名prop赋值给变量proptype
	      if (column.order === "descending") {
	        this.tableData.sort(this.my_desc_sort);
	       
	      } else if (column.order === "ascending") {
	        this.tableData.sort(this.my_asc_sort);	        
	      }
	      
	    },
	    //排序方法
	    my_desc_sort:function(a, b) {
	    	if(typeof(a[this.proptype])=="string")
	    		 return  b[this.proptype].localeCompare(a[this.proptype]);
	    	else if(typeof(a[this.proptype])=="number")
	      	return b[this.proptype] - a[this.proptype]; // a["time"] 等价于 a.time
	    },
	    my_asc_sort:function(a, b) {
	    	if(typeof(a[this.proptype])=="string")
	    		 return  a[this.proptype].localeCompare(b[this.proptype]);
	    	else if(typeof(a[this.proptype])=="number")
	      	return a[this.proptype] - b[this.proptype]; // a["time"] 等价于 a.time
	    },
	    jsonToExcel:function(){
	    	var arr = [];
	    	var datas=[];
	    	this.titleData.forEach(function(item){
	    	 //arr.push({id: item.dd,	 text: item.re1})
	    	  arr.push(item.propName) ;
	    	})
			var option={};
			option.fileName = "应收账款查询"+new Date().getFullYear();			
			datas.push({sheetData:this.tableData,sheetHeader:arr});
			option.datas=datas;			
			var toExcel=new ExportJsonExcel(option);
			toExcel.saveExcel();
		}
	}
})

</script>
<style lang="less" scoped>
.el-tabs__item {
	padding: 0 20px;
	height: 40px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 40px;
	display: inline-block;
	list-style: none;
	font-size: 18px;
	font-weight: 500;
	color: #FFA500;
	position: relative;
}

.el-tabs__content {
	height: calc(100% - 40px);
}

.el-tabs--card>.el-tabs__header {
	border-bottom: 1px solid #E4E7ED;
	background-color: gainsboro;
}

.el-tabs__item.is-active {
	color: #00BFFF;
}

.el-tabs__item:hover {
	color: #00BFFF;
	cursor: pointer;
}

.myMargin {
	margin-left: 5%;
}
</style>
</body>
</html>